<template>
  <page-header-wrapper
    :tab-list="tabList"
    :tab-active-key="tabActiveKey"
    :tab-change="handleTabChange"
  >
    <template v-slot:content>
      <div class="ant-pro-page-header-search">
        <a-input-search size="large" style="width: 80%; max-width: 522px">
          <template v-slot:enterButton> 搜索 </template>
        </a-input-search>
      </div>
    </template>
    <router-view />
  </page-header-wrapper>
</template>

<script>
const getActiveKey = (path) => {
  switch (path) {
    case "/list/search/article":
      return "1";
    case "/list/search/project":
      return "2";
    case "/list/search/application":
      return "3";
    default:
      return "1";
  }
};
export default {
  name: "SearchLayout",
  data() {
    return {
      tabList: [
        { key: "1", tab: "文章" },
        { key: "2", tab: "项目" },
        { key: "3", tab: "应用" },
      ],
      tabActiveKey: "1",
      search: true,
    };
  },
  created() {
    this.tabActiveKey = getActiveKey(this.$route.path);

    this.$watch("$route", (val) => {
      this.tabActiveKey = getActiveKey(val.path);
    });
  },
  methods: {
    handleTabChange(key) {
      this.tabActiveKey = key;
      switch (key) {
        case "1":
          this.$router.push("/list/search/article");
          break;
        case "2":
          this.$router.push("/list/search/project");
          break;
        case "3":
          this.$router.push("/list/search/application");
          break;
        default:
          this.$router.push("/workplace");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.ant-pro-page-header-search {
  text-align: center;
  margin-bottom: 16px;
}
</style>